<template>
  <div class="login">
    <!-- <div class="login_header">
      <div class="part1">
        <img src="@assets/img/1_06.jpg" alt="" class="img1" />
        <img src="@assets/img/xiaotu.jpg" alt="" class="img2" />
      </div>
    </div> -->
    <div class="login_body">
      <div class="min_body">
      <div class="login_box">
        <div class="title_l">
          登录
        </div>
        <div class="hang_l">
          <div class="iconfont icon-yonghuming"></div>
          <el-input v-model="name" placeholder="请输入账号" maxlength="30" ></el-input>
        </div>
        <div class="hang_l">
          <div class="iconfont icon-jiesuo"></div>
          <el-input v-model="psd" placeholder="请输入密码" maxlength="30"  type="password" @focus='haveKey'></el-input>
        </div>
        <div class="ctrl2M_l">
          <el-checkbox v-model="checkedC" @click="rememberUser"><span class="blue">记住本次登录</span></el-checkbox>
        </div>
        <div class="ctrl_l">
          <div class="find_psd"  @click="loginIn('find')">忘记密码</div>
          <div class="find_psd" @click="loginIn">注册账号</div>
        </div>
        <el-button class="sub_btn" type="primary" @click="submitTo">登录</el-button>
      </div>
      </div>
    </div>
    <Footer :margintop1="true"></Footer>
  </div>
</template>

<script>

export default {
  components: {
    
  },
  data() {
    return {
      name:"",
      psd:"",
      rpsd:"",
      yzm:"",
      checkedC:true
    };
  },
  beforeMount(){
    let dataL = sessionStorage.getItem("logonState");
    if(dataL){
      let dataLL = JSON.parse(dataL);
      this.name = dataLL.account;
      this.psd = dataLL.password;
    }
  },
  methods: {
    rememberUser(){
      this.checkedC = !this.checkedC
    },
    haveKey(){
      let this_ = this;
      window.addEventListener('keydown',(e)=>{
        if(e.keyCode == 13){
          this_.submitTo();
          // console.log("caocao")
        }
      });
    },
    loginIn(isF){
      if(isF == 'find'){
        this.$router.push({path:"/loginIn",query:{sel:1}})
      }else{
        this.$router.push({path:"/loginIn"})
      }
      
    },
    submitTo(){
      let dataL = {
        account:this.name,
        password:this.psd
      }
      if(this.checkedC){
        sessionStorage.setItem("logonState",JSON.stringify(dataL))
      }else{
        sessionStorage.clear("logonState")
      }
      this.$getApi("/common/login",dataL).then(res=>{
        console.log(res.data) 
        this.$store.commit("login",res.data)
        // this.$router.go(-1);
        let routeData = ""
        if(res.data.type == 1){
          // routeData = this.$router.resolve({
          //   path: "/hezuo",
          //   query: {sel:0 ,id:res.data.id}
          // });
          this.$router.push({
            path: "/hezuo",
            query: {sel:0 ,id:res.data.id}
          });
        }
        if(res.data.type == 2){
          // routeData = this.$router.resolve({
          //   path: "/hezuoGr",
          //   query: {sel:0 ,id:res.data.id}
          // });
          this.$router.push({
            path: "/hezuoGr",
            query: {sel:0 ,id:res.data.id}
          });
        }
        // window.open(routeData.href, '_blank');
      }).catch((err)=>{console.log(err)})
    }
  },
};
</script>

<style scoped lang="stylus">
.login{
  .part1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width 1000px 
    margin 0 auto 1px;
    .img1 {
      width: 351px;
      height: 65px;
    }

    .img2 {
      width: 541px;
      height: 114px;
    }
  }
  .login_body{
    min-height calc(100vh - 314px);
    background url(../../assets/img/login.jpg) no-repeat center center;
    background-size :100% auto;
    position:relative;
    .min_body{
      min-height 500px  
    }
    .login_box{
      position:absolute;
      top:50%;
      left:50%;
      width 300px;
      height 300px;
      margin-left 100px;
      margin-top :-170px;
      box-shadow 3px 3px 6px #000;
      background rgba(255,255,255,.4) 
      padding 20px 20px
      border 1px solid #fff
      border-radius 6px
      color #fff
      .title_l{
        font-size 20px
        border-bottom 1px solid #f0f0f0
        padding-bottom 6px
      }
      .hang_l{
        display flex;
        align-items center
        margin-top 30px
        .iconfont{

          margin-right 16px
          font-size 26px
        }
      }
      .ctrl_l{
        display flex;
        align-items center
        justify-content space-between
        color #f0f0f0
        padding 8px 0 14px;
        .find_psd{
          cursor pointer;
          font-size 16px
          &:hover{
            color #1d73c8
          }
        }
      }
      .ctrl2M_l{
        padding-top 18px
        
        .blue{
          color #2172ce
        }
      }
      .sub_btn{
        width 100%
      }
    }
  }
}
</style>
